<div id="item100">
  <br/>
  <h2>表单设计器</h2>
  <p>表单设计是系统的核心，用于CURD增删改查，
    拖拽设计所见即所得。
    支持单表、一对多、多对多（需要用到脚本）关系。
  </p>
  <p>生成的表单，默认自适应，默认支持子表单的数据检验</p>
  <div class="alert alert-success" role="alert">
    支持：表单设计导出到json文件、导入json，任意迁移设计。
  </div>
  <div class="alert alert-light" role="alert">
    <p>
      表单设计后提交时会生成数据库表（有开关可以不生成），设计字段时请不要使用下面的系统内置字段（默认会添加）：
      <ul>
        <li>id：主键 uint64</li> 
        <li>uid：用户ID uint64</li>
        <li>coden：单据编号 string</li>
        <li>status：单据状态 int8</li>
        <li>create_at：创建时间 time</li>
        <li>update_at：更新时间 time</li>
        <li>deleted_at：删除时间（暂未启用，当前是永久删除） *time</li>
      </ul>
    </p>
  </div>
</div>

<div id="item100-1">
  <h4>表单功能介绍</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ul>
        <li>点击左侧组件，即可添加到布局区域</li> 
        <li>布局区域中的每一个字段都可以拖拽位置</li>
        <li>右边是<span class="text-primary">当前选中字段</span>的设置项</li>
      </ul>
    </p>
  </div>
  <div>
    <img src="/static/image/form-1.png" alt="form-1" width="100%" height="100%">
  </div>
</div>

<div id="item100-2">
  <h4>表单项属性</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ul>
        <li>表单项 form-item，对应表单的UI和交互效果</li> 
        <li>表单字段 对应着数据库字段，建议用下划线命名，形如：address_name</li> 
        <li>主要包含了 表单项属性(form-item)、组件属性(props)、数据校验 插槽(slots)、交互事件(events)、数据库字段设置（多数情况下用默认的就行）。</li>
        <li>
          这里会讲到几个组件的特殊设置：
          <a href="#item100-3" class="link-primary">下拉选择 & 下拉树选择</a>
          <a href="#item100-4" class="link-primary">文件上传</a>
          <a href="#item100-5" class="link-primary">子表单</a>
          <a href="#item100-6" class="link-primary">选择用户</a>
        </li>
        <li>配置项其他字段的意思，请参考arco的文档配置，<a href="https://arco.design/vue/docs/start" target="_blank" class="link-primary">跳转查看</a></li>
      </ul>
    </p>
  </div>
  <div>
    <img src="/static/image/form-item-1.png" alt="form-1" width="30%" height="50%">
  </div>
</div>

<div id="item100-3">
  <h4>下拉选择 & 下拉树选择</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ul>
        <li>下拉选择就是一对一关系</li>
        <li>目前这两个组件不支持multiple多选</li>
        <li>组件属性有两项必填：1、doctypeTableName需要填数据库表名，2、fieldNames.label（下拉树是fieldNames.title）要填写显示的字段</li>
        <li>事件处理中，事件yqRefresh方法中的字段需要替换成 表单字段（一般是下划线的英文名）</li>
        <li>数据库字段设置，使用默认就可以</li>
        <li>其他属性设置参考arco文档 <a href="https://arco.design/vue/docs/start" target="_blank" class="link-primary">跳转查看</a></li>
      </ul>
    </p>
  </div>
</div>

<div id="item100-4">
  <h4>文件上传</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ul>
        <li>组件属性multiple=true支持多文件上传，数据库字段会设置成json类型。如果数据库不支持，这里就不能设置成true，比如sqlserver应该是不支持的</li> 
        <li>事件处理，事件yqUpload中的字段必须替换成 表单字段（一般是下划线的英文名）</li> 
        <li>事件处理，组件属性multiple=true并且showRemoveButton=true时，事件yqRemoved中的字段必须替换成 表单字段（一般是下划线的英文名）</li> 
        <li>文件选择后，会自动上传</li>
      </ul>
    </p>
  </div>
</div>

<div id="item100-5">
  <h4>子表单</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ol>
        <li>添加子表单就是一对多关系</li> 
        <li>第一步，先创建子表单，保存时选中：表单全局配置 -> 数据库表设置 -> 子表单</li> 
        <li>第二步，选中子表单组件，在事件处理中下拉选择子表关联，选择上一步创建的表，会默认添加子表的字段</li> 
        <li>
          <div class="alert alert-warning" role="alert">
            提示：关联的子表单不会包含：虚拟字段、子表被隐藏的字段、信息展示组件（二维码除外）。<br/>
            子表单的字段不能包含key，因为key字段会被后端忽略，不会保存到数据库。
          </div>
        </li>
      </ol>
    </p>
  </div>
</div>

<div id="item100-6">
  <h4>选择用户</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ol>
        <li>选择用户也是一对一关系</li> 
        <li>组件属性中fieldsStr可以设置额外的显示字段，用逗号分割</li> 
        <li>如果在下拉选择中需要添加按钮，设置组件属性的showAdd=true</li> 
        <li>当 表单字段 修改后，事件yqRefresh中的字段也需要替换成修改后的表单字段（一般是下划线的英文名）。</li> 
      </ol>
    </p>
  </div>
</div>

<div id="item100-7">
  <h4>自定义 表单代码</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ol>
        <li>点击：表单设计管理 -> 表单代码</li> 
        <li>其中 默认生成 是设计保存后自动生成的代码，这里不能被修改</li> 
        <li>自定义表单代码，复制 默认生成 的全部代码，点击左侧新增，左侧输入名称备注，再粘贴全部代码，再保存，最后点击应用表单代码，刷新即生效</li> 
        <li>应用场景：手写VUE代码，更个性化的设计表单</li>
      </ol>
    </p>
    <div>
      <img src="/static/image/form-code-1.png" alt="form-code-1" width="100%" height="100%">
    </div>
  </div>
</div>

<div id="item100-8">
  <h4>钩子hooks</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ol>
        <li>点击：表单设计管理 -> 钩子hooks</li> 
        <li>hooks里面是go脚本，这个脚本是在数据库事物中执行的，如果发生错误，整个事务会回滚。执行的时机是在CURD之前执行</li> 
        <li>钩子hooks保存后就生效</li>
        <li>应用场景：1、数据行的权限过滤，比如某用户只能看某些数据；2、触发三方api；等等</li> 
      </ol>
    </p>
    <div>
      <img src="/static/image/form-hooks-1.png" alt="form-hooks-1" width="100%" height="100%">
    </div>
  </div>
</div>

<div id="item100-9">
  <h4>表单全局设置</h4>
  <div class="alert alert-light" role="alert">
    <p>
      <ol>
        <li>点击：顶部工具栏最左侧按钮 -> 表单全局设置</li> 
        <li>里面主要是表单的全局设置，每个字段也有解释</li>
        <li>表单会绑定到菜单，需要填写菜单信息</li>
      </ol>
    </p>
  </div>
</div>

